<!--
 * @Description: h函數的使用
 * @Author: Zhanghan
 * @Date: 2024-11-18 10:38:49
 * @LastEditTime: 2024-11-21 17:40:06
 * @LastEditors: Zhanghan
-->
<template>
  <div class="mybox">
    <div class="hStudy">
      <div class="title">1、渲染带style标签</div>
      <El />
      <div class="title">2、h函数渲染带class样式</div>
      <El1 />
      <MyComponent />
      <div class="title">3、h函数渲染多个元素</div>
      <El2 />
      <div class="title">4、h函数渲染组件prop传参</div>
      <ElChild />
      <div class="title">5、h函数渲染组件插槽内容</div>
      <ElSlotChild />
      <div class="title">6、h函数渲染组件点击事件</div>
      <ElClickChild />
      <div class="title">7、element组件使用h函数渲染vnode示例</div>
      <ElButton type="primary" @click="openMessage" >打开一个messagebox，渲染select组件</ElButton>
      <div class="title" />
      <hr />
      <div>
        <div>h函数的作用，创建虚拟 DOM 节点 (vnode)。</div>
        <div>
          参数分析，第一个参数是原生元素字符串例如'div','span','input'等，第二个参数是一个对象里面可以存放props传参，style样式，以及class类名等(如果不需要可以传Null,或者不写)，第三个参数是子节点数组也可以是第一个元素对应的内容(字符串)。
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { h, render , ref } from "vue";
import { ElMessageBox, ElButton ,ElSwitch } from "element-plus";
import Child from "./component/Child.vue";
import SlotChild from "./component/SlotChild.vue";

const checked = ref<any>(false);

const El = {
  render() {
    return h("div", { style: "color:red;" }, "h函数渲染带style标签，字体红色");
  },
};
const El1 = {
  render() {
    h("div", { class: "yellow" }, "h函数渲染带class样式，字体黄色");
  },
};
const El2 = {
  render() {
    return h(
      "div",
      {
        style: "display:flex;flex-direction:column;",
      },
      [
        h("span", { style: "color:blue;" }, "练习时长两年半（蓝色）"),
        h("span", { style: "color:green;" }, "练习时长两年半（绿色）"),
      ]
    );
  },
};

const MyComponent = {
  render() {
    return h("div", { class: "yellow" }, [
      h("h1", "Hello, World!"),
      h("p", "This is a paragraph."),
    ]);
  },
};

const ElChild = {
  render() {
    return h(Child, { text: "props的传参", style: "color:blue;" });
  },
};

const ElSlotChild = {
  render() {
    return h(
      SlotChild,
      null, //这里一般传null,避免影响子组件的样式 也可以传style样式等或props传参
      {
        default: () => h("div", { style: "color:red;" }, "默认插槽内容"),
        content: () => h("div", { style: "color:green;" }, "content插槽内容"),
      }
    );
  },
};

const ElClickChild = {
  render() {
    return h(
      "div",
      {
        onClick: () => {
          window.alert("别点啦！！！！");
        },
      },
      "点击事件"
    );
  },
};

const openMessage = () => {
  ElMessageBox({
    title: '自定义组件',
    message: () => 
      h(ElSwitch, {
        modelValue: checked.value,
        'onChange': (val: boolean | string | number) => {
          console.log("🚀 ~ openMessage ~ val:", val);
          checked.value = val
        },
      }),
  })
};
</script>

<style scoped lang="less">
.mybox {
  width: 100%;
  .hStudy {
    .title {
      font-size: 24px;
      font-weight: bold;
      margin: 10px 0px;
    }

    .yellow {
      color: yellow !important;
      font-style: italic !important;
    }
  }
}
</style>
